import React, { Component } from 'react';
import { Input } from 'antd';
import { map } from 'lodash';

class InputComp extends Component {
  // 返回一个对象来更新 state
  static getDerivedStateFromProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      return {
        value: nextProps.value,
      };
    }
    return null;
  }

  constructor(props) {
    super(props);
    this.state = {
      value: props.value || '',
    };
  }

  handleChange(value) {
    if (!('value' in this.props)) {
      this.setState({ value });
    }
    this.triggerChange(value);
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  render() {
    const { compSetting, nativeProps } = this.props;
    return (
      <Input
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
        {...nativeProps}
      />
    );
  }
}

export default InputComp;
